<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
      'box-sizing': 'border-box',
    }"
  >
    <view
      :style="{
        width: '100%',
        height: statusBarHeight + 'px',
        background: 'white',
        position: 'fixed',
        top: 0,
        zIndex: 100,
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">评论</view>
    </view>
    <view class="box" :style="{ marginTop: statusBarHeight + 'px' }" v-if="list && list.length>0">
      <scroll-view
        :style="{
          height: scrollHeihgt + 'px',
        }"
        :scroll-y="true"
        @scroll="scroll"
        @scrolltolower="scrolltolower"
      >
        <view
          class="box_item"
          v-for="(item, index) in list"
          :key="index"
          @click="toDetail(item)"
        >
          <view class="item_left" v-if="item.user">
            <image :src="item.user.avatar_url" mode=""></image>
          </view>
          <view class="item_right">
            <view class="right_t" v-if="item.user">
              <view class="name"> {{ item.user.nick_name }} </view>
              <view class="comment"> {{ item.title }} </view>
              <view class="time"> {{ item.new_time }} </view>
            </view>
            <view class="right_b">
              <view class="b_text">
                {{ item.content }}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="empty_view" v-if="list && list.length == 0">
      <image
        class="item_left_clickable"
        src="../../static/images/my/kong.png"
        mode=""
      ></image>
      <view>当前暂无评论~</view>
    </view>
	<floatingBall></floatingBall>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      
      list: [],
      page:1,
      last_page:0,
      scrollHeihgt:0,
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    const windowHeihgt = statusBarHeight.windowHeight;
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
          this.scrollHeihgt = windowHeihgt - data.height - this.statusBarHeight
        })
        .exec();
    });
    this.getList();
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    toDetail(item) {
      console.log("itemitem", item);
      if (item.association_module == 5) {
        uni.navigateTo({
          url:
            "/pages/distinguish/detail?xinghe_id=" +
            item.association_id +
            "&id=" +
            item.discuss_id,
        });
      } else if (item.association_module == 7) {
        uni.navigateTo({
          url: "/pages/detail/coCreateFly?id=" + item.association_id,
        });
      } else if (
        (item.association_module >= 1 && item.association_module <= 4) ||
        item.association_module == 6
      ) {
        let obj = {
          1: "fei",
          2: "ling",
          3: "shi",
          4: "wen",
          6: "youji",
        };
        uni.navigateTo({
          url:
            "/pages/detail/flyDetail?currentId=" +
            item.association_id +
            "&detailType=" +
            obj[item.association_module] +
            "&from=xiaoxi",
        });
      } else if (item.association_module == 8) {
        uni.navigateTo({
          url: "/pages/character/characterDetail?id=" + item.association_id,
        });
      } else if (item.association_module == 9) {
        uni.navigateTo({
          url: "/pages/training/detail?id=" + item.association_id + "&type=1",
        });
      } else if (item.association_module == 10) {
        uni.navigateTo({
          url: "/pages/training/detail?id=" + item.association_id + "&type=2",
        });
      } else if (item.association_module == 11) {
        uni.navigateTo({
          url:
            "/pages/stargate/maps?id=" +
            item.association_id +
            "&type=2",
        });
      } else if (item.association_module == 12) {
        uni.navigateTo({
          url: "/pages/book/detail?id=" + item.association_id,
        });
      } else if (
        item.association_module == 14 ||
        item.association_module == 15
      ) {
        let obj = {
          14: "myjiaxiang",
          15: "myjiazu",
        };
        uni.navigateTo({
          url:
            "/pages/detail/flyDetail?currentId=" +
            item.association_id +
            "&detailType=" +
            obj[item.association_module] +
            "&from=xiaoxi",
        });
      }
    },
    getList() {
      this.$http
        .messagePinglun({page:this.page})
        .then((res) => {
          // this.list = res.data.list.data;
          this.list = this.list.concat(res.data.list.data);
          this.last_page = res.data.list.last_page
          // this.xiaoyaoList = data;
          console.log(this.list, "评论列表");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    scroll() {},
    scrolltolower() {
      if (this.page == this.last_page || this.last_page == 0) {
      } else {
        this.page++
        this.getList()
      }
      // console.log("触发");
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.head {
  width: 100%;
  padding: 18rpx 0 47rpx;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 99;
  .head_left {
    position: absolute;
    left: 30rpx;
  }
  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}

.box_item {
  width: 100%;
  height: 100rpx;
  display: flex;
  margin-bottom: 48rpx;
  .item_left {
    width: 100rpx;
    height: 100rpx;
    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .item_right {
    flex: 1;
    padding-left: 24rpx;
    padding: 3rpx 0 3rpx 24rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .right_t {
      display: flex;
      align-items: center;
      .name {
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #444444;
      }
      .comment {
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #ff8a4c;
        margin-left: 16rpx;
        flex: 1;
      }
      .time {
        font-size: 26rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #888888;
      }
    }
    .right_b {
      width: 560rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #888888;
      margin-top: 4rpx;
      .b_text {
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
.empty_view {
  margin-top: 300rpx;
  image {
    margin: 0 auto;
    width: 410rpx;
    height: 410rpx;
  }
  view {
    font-size: 30rpx;
    color: #d8d8d8;
    text-align: center;
  }
}
</style>